<!DOCTYPE html>
<html>

	<head>
		<title>HTML5</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<style type="text/css">
			img {
				width: 200px;
			}
			
			.div1 {
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				margin: 150px auto;
			}
			
			.animate1 {
				-webkit-animation: move1 2s infinite;
			}
			
			.animate2 {
				-webkit-animation: move2 1s infinite;
			}
			
			@-webkit-keyframes move1 {
				0% {
					-webkit-transform: scale(1);
				}
				100% {
					-webkit-transform: scale(1.5);
				}
			}
			
			@-webkit-keyframes move2 {
				0% {
					-webkit-transform: rotateZ(0deg) scale(1.5);
					-webkit-transform: ;
				}
				100% {
					-webkit-transform: rotateZ(360deg) scale(1.5);
				}
			}
		</style>
	</head>

	<body>

		<div class="div1 animate2">
			<img src="img/1.png" alt="" />
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.querySelector(".div1");
				oDiv.className = "div1 animate1";
				setTimeout(function() {
					oDiv.className = "div1 animate2";
				}, 2000);
			}
		</script>
	</body>

</html>